// 评论活跃度画像
var commentActiveOption = {
    backgroundColor: '#f8f8f8',
    title: {
        text: '评论活跃度画像',
        x: 'center',
        top: 16,
        textStyle: {
            color: '#222',
            fontSize: 16
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    legend: {
        bottom: 50,
        left: 'center',
        data: ["评论1次", "评论2-5次", "评论6-10次", "评论10+次"] //此处修改为data.data.legend
    },
    color: ['#31c7c8', '#b4a3db', '#57b2ec', '#ffb885'],
    series: [
        {
            name: '评论活跃度',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            label: {
                show: true,
                formatter: '{b}'
            },
            data: [
                { "name": "评论1次", "value": 81.02 },
                { "name": "评论2-5次", "value": 16.76 },
                { "name": "评论6-10次", "value": 1.62 },
                { "name": "评论10+次", "value": 0.61 }
            ]//此处修改为data.data.series_data
        }
    ]
};
var commentActive = echarts.init(document.getElementById('commentActive'));
commentActive.setOption(commentActiveOption);
// 性别画像
var sexOption = {
    backgroundColor: '#f8f8f8',
    title: {
        text: '性别画像',
        x: 'center',
        top: 16,
        textStyle: {
            color: '#222',
            fontSize: 16
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    legend: {
        bottom: 50,
        left: 'center',
        data: ["男", "女"]//此处修改为data.data.legend
    },
    color: ['#31c7c8', '#b4a3db', '#57b2ec', '#ffb885'],
    series: [
        {
            name: '性别',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            label: {
                show: true,
                formatter: '{b}'
            },
            data: [
                { "name": "男", "value": 73.05 },
                { "name": "女", "value": 26.95 }
            ]//此处修改为data.data.series_data
        }
    ]
};
var sex = echarts.init(document.getElementById('sex'));
sex.setOption(sexOption);
// 年龄分布
var ageOption = {
    backgroundColor: '#f8f8f8',
    title: {
        text: '年龄分布',
        x: 'center',
        top: 16,
        textStyle: {
            color: '#222',
            fontSize: 16
        }
    },
    tooltip: {
        show: true,
        formatter: "{b}:{c}%"
    },
    grid: {
        left: '6%',
        top: '15%',
        right: '6%',
        bottom: '4%',
        containLabel: true
    },

    xAxis: {
        type: 'value',
        show: true,
        position: 'bottom',
        axisTick: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008bca',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#eee'
            }
        },
        splitArea: {
            show: true,
            interval: 1,
            areaStyle: {
                color: ['#fff', '#f9f9f9']
            }
        }
    },
    yAxis: [{
        type: 'category',
        axisTick: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        splitLine: { //网格线
            show: false,
            lineStyle: {
                color: '#008bca'
            }
        },
        inverse: 'true', //排序
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        data: ["1990", "1994", "1992", "1993", "1991", "1989", "1995", "1988", "1996", "1987", "2000", "1986", "1997", "1985", "1998", "2018", "1984", "1999", "1982", "1983"]//此处修改为data.data.x_axis_data
    }

    ],
    series: [{
        name: '年龄分布',
        type: 'bar',
        label: {
            normal: {
                show: false,
            }
        },
        itemStyle: {
            normal: {
                show: true,
                color: '#31c7c8',
            }
        },
        data: [8.91, 7.86, 7.31, 7.19, 6.97, 6.81, 6.79, 6.44, 5.27, 4.93, 4.64, 4.22, 3.85, 3.27, 3.08, 2.81, 2.6, 2.38, 2.34, 2.33]//此处修改为data.data.series_data
    }
    ]
}
var age = echarts.init(document.getElementById('age'));
age.setOption(ageOption);
// 星座分布
var constellationOption = {
    backgroundColor: '#f8f8f8',
    title: {
        text: '星座分布',
        x: 'center',
        top: 16,
        textStyle: {
            color: '#222',
            fontSize: 16
        }
    },
    tooltip: {
        show: true,
        formatter: "{b}:{c}%"
    },
    grid: {
        left: '6%',
        top: '15%',
        right: '6%',
        bottom: '4%',
        containLabel: true
    },

    xAxis: {
        type: 'value',
        show: true,
        position: 'bottom',
        axisTick: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008bca',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#eee'
            }
        },
        splitArea: {
            show: true,
            interval: 1,
            areaStyle: {
                color: ['#fff', '#f9f9f9']
            }
        }
    },
    yAxis: [{
        type: 'category',
        axisTick: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        splitLine: { //网格线
            show: false,
            lineStyle: {
                color: '#008bca'
            }
        },
        inverse: 'true', //排序
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        data: ["魔羯座", "天秤座", "天蝎座", "狮子座", "射手座", "水瓶座", "双子座", "双鱼座", "处女座", "巨蟹座", "金牛座", "白羊座"]//此处修改为data.data.x_axis_data
    }

    ],
    series: [{
        name: '星座分布',
        type: 'bar',
        label: {
            normal: {
                show: false,
            }
        },
        itemStyle: {
            normal: {
                show: true,
                color: '#31c7c8',
            }
        },
        data: [17.84, 8.84, 8.32, 7.85, 7.73, 7.61, 7.53, 7.47, 7.32, 6.69, 6.59, 6.21]//此处修改为data.data.series_data
    }
    ]
};
var constellation = echarts.init(document.getElementById('constellation'));
constellation.setOption(constellationOption);
// 粉丝数波动曲线
var fansNumOption = {
    backgroundColor: '#f8f8f8',
    title: {
        text: '粉丝数波动曲线',
        left: 16,
        top: 16,
        textStyle: {
            color: '#222',
            fontSize: 16
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        type: 'category',
        data: ["2019-11-27 00:00", "2019-11-27 04:00", "2019-11-27 08:00", "2019-11-27 12:00", "2019-11-27 16:00", "2019-11-27 20:00", "2019-11-28 00:00", "2019-11-28 04:00", "2019-11-28 08:00", "2019-11-28 12:00", "2019-11-28 16:00", "2019-11-28 20:00", "2019-11-29 00:00", "2019-11-29 04:00", "2019-11-29 08:00", "2019-11-29 12:00", "2019-11-29 16:00", "2019-11-29 20:00", "2019-11-30 00:00", "2019-11-30 04:00", "2019-11-30 08:00", "2019-11-30 12:00", "2019-11-30 16:00", "2019-11-30 20:00", "2019-12-01 00:00", "2019-12-01 04:00", "2019-12-01 08:00", "2019-12-01 12:00", "2019-12-01 16:00", "2019-12-01 20:00", "2019-12-02 00:00", "2019-12-02 04:00", "2019-12-02 08:00", "2019-12-02 12:00", "2019-12-02 16:00", "2019-12-02 20:00", "2019-12-03 00:00", "2019-12-03 04:00", "2019-12-03 08:00", "2019-12-03 12:00", "2019-12-03 16:00", "2019-12-03 20:00", "2019-12-04 00:00", "2019-12-04 04:00", "2019-12-04 08:00", "2019-12-04 12:00", "2019-12-04 16:00", "2019-12-04 20:00", "2019-12-05 00:00", "2019-12-05 04:00", "2019-12-05 08:00", "2019-12-05 12:00", "2019-12-05 16:00", "2019-12-05 20:00", "2019-12-06 00:00"],//此处修改为data.data.follower_count.x_axis_data
        axisTick: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008bca',
            }
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'value',
        axisTick: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008bca',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#eee'
            }
        },
        splitArea: {
            show: true,
            interval: 1,
            areaStyle: {
                color: ['#fff', '#f9f9f9']
            }
        },
        min: function (value) {
            return value.min - 100
        }
    }],
    series: [{
        name: '粉丝数',
        type: 'line',
        data: [1926365, 1926754, 1926998, 1927434, 1927585, 1927594, 1927687, 1927694, 1927686, 1927658, 1927628, 1927570, 1927498, 1927480, 1927463, 1927439, 1927397, 1927366, 1927310, 1927290, 1927284, 1927275, 1927256, 1927201, 1927102, 1927069, 1927060, 1927039, 1926996, 1926991, 1926927, 1926928, 1926919, 1926928, 1926927, 1926882, 1926828, 1926819, 1926817, 1926860, 1926910, 1926862, 1926803, 1926767, 1926760, 1926766, 1926726, 1926678, 1926536, 1926498, 1926486, 1926442, 1926393, 1926338, 1926233],//此处修改取出data.data.follower_count.series_data数组中value存为一个数组
        lineStyle: {
            normal: {
                width: 2,
                color: '#34c8c9'
            }
        },
        itemStyle: {
            opacity: 0
        },
        smooth: true
    }]
};
var fansNum = echarts.init(document.getElementById('fansNum'));
fansNum.setOption(fansNumOption);
// 粉丝增长趋势
var fansIncrementOption = {
    backgroundColor: '#f8f8f8',
    title: {
        text: '粉丝数波动曲线',
        left: 16,
        top: 16,
        textStyle: {
            color: '#222',
            fontSize: 16
        }
    },
    tooltip: {
        type: 'axis'
    },
    xAxis: [{
        type: 'category',
        data: ["2019-11-27 04:00", "2019-11-27 08:00", "2019-11-27 12:00", "2019-11-27 16:00", "2019-11-27 20:00", "2019-11-28 00:00", "2019-11-28 04:00", "2019-11-28 08:00", "2019-11-28 12:00", "2019-11-28 16:00", "2019-11-28 20:00", "2019-11-29 00:00", "2019-11-29 04:00", "2019-11-29 08:00", "2019-11-29 12:00", "2019-11-29 16:00", "2019-11-29 20:00", "2019-11-30 00:00", "2019-11-30 04:00", "2019-11-30 08:00", "2019-11-30 12:00", "2019-11-30 16:00", "2019-11-30 20:00", "2019-12-01 00:00", "2019-12-01 04:00", "2019-12-01 08:00", "2019-12-01 12:00", "2019-12-01 16:00", "2019-12-01 20:00", "2019-12-02 00:00", "2019-12-02 04:00", "2019-12-02 08:00", "2019-12-02 12:00", "2019-12-02 16:00", "2019-12-02 20:00", "2019-12-03 00:00", "2019-12-03 04:00", "2019-12-03 08:00", "2019-12-03 12:00", "2019-12-03 16:00", "2019-12-03 20:00", "2019-12-04 00:00", "2019-12-04 04:00", "2019-12-04 08:00", "2019-12-04 12:00", "2019-12-04 16:00", "2019-12-04 20:00", "2019-12-05 00:00", "2019-12-05 04:00", "2019-12-05 08:00", "2019-12-05 12:00", "2019-12-05 16:00", "2019-12-05 20:00", "2019-12-06 00:00"],//此处修改为data.data.incrementx_axis_data.
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008bca',
            }
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'value',
        axisTick: {
            show: true,
            lineStyle: {
                color: '#008bca'
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008bca',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#eee'
            }
        },
        splitArea: {
            show: true,
            interval: 1,
            areaStyle: {
                color: ['#fff', '#f9f9f9']
            }
        }
    }],
    series: [{
        type: 'bar',
        itemStyle: {
            normal: {
                color: function (params) {
                    var colorList;
                    if (params.data >= 0) {
                        colorList = '#fe0014';
                    } else {
                        colorList = '#137f1a';
                    }
                    return colorList;
                },
            }
        },
        data: [389, 244, 436, 151, 9, 93, 7, -8, -28, -30, -58, -72, -18, -17, -24, -42, -31, -56, -20, -6, -9, -19, -55, -99, -33, -9, -21, -43, -5, -64, 1, -9, 9, -1, -45, -54, -9, -2, 43, 50, -48, -59, -36, -7, 6, -40, -48, -142, -38, -12, -44, -49, -55, -105],//此处修改为data.data.increment.series_data
    }]
}
var fansIncrement = echarts.init(document.getElementById('fansIncrement'));
fansIncrement.setOption(fansIncrementOption);

